<template>
    <div class="myContainer">
        <el-row class="myPaddingTop_10px">
            <el-col :span="24">
                <el-tabs type="card" v-model="activeName" @tab-click="handleClick">
                    <el-tab-pane label="基础信息" name="first">
                        <el-row class="myPaddingBottom_10px">
                            <el-col :span="3" class="myLeftMsg">
                                任务单号 :
                            </el-col>
                            <el-col :span="6">
                                <el-input placeholder="任务单号" v-model="datas.task_no" :readonly="readonly"></el-input>
                            </el-col>
                            <el-col :span="3" class="myLeftMsg">
                                任务状态 :
                            </el-col>
                            <el-col :span="6">
                                <el-input placeholder="任务状态" v-model="mainstatus" :readonly="readonly"></el-input>
                            </el-col>
                        </el-row><el-row class="myPaddingBottom_10px">
                        <el-col :span="3" class="myLeftMsg">
                            任务单名称 :
                        </el-col>
                        <el-col :span="6">
                            <el-input placeholder="任务名称" v-model="datas.plan_title" :readonly="readonly"></el-input>
                        </el-col>
                    </el-row>
                        <el-row class="myPaddingBottom_10px">
                            <el-col :span="3" class="myLeftMsg">
                                考核小区 :
                            </el-col>
                            <el-col :span="6">
                                <el-input placeholder="考核小区" v-model="datas.area_name" :readonly="readonly"></el-input>
                            </el-col>
                        </el-row>
                        <el-row class="myPaddingBottom_10px">
                            <el-col :span="3" class="myLeftMsg">
                                考核类型 :
                            </el-col>
                            <el-col :span="6">
                                <el-input placeholder="考核类型" v-model="datas.type_name" :readonly="readonly"></el-input>
                            </el-col>
                        </el-row>
                        <el-row class="myPaddingBottom_10px">
                            <el-col :span="3" class="myLeftMsg">
                                考核得分 :
                            </el-col>
                            <el-col :span="6">
                                <el-input placeholder="考核得分" v-model="datas.type_score" :readonly="readonly"></el-input>
                            </el-col>
                        </el-row>
                        <el-row class="myPaddingBottom_10px">
                            <el-col :span="3" class="myLeftMsg">
                                负责人 :
                            </el-col>
                            <el-col :span="6">
                                <el-input placeholder="任务负责人" v-model="datas.charger_name" :readonly="readonly"></el-input>
                            </el-col>
                            <!-- <el-col :span="3" class="myLeftMsg">
                              联系电话 :
                            </el-col>
                            <el-col :span="6">
                              <el-input placeholder="联系电话" v-model="datas.charger_phone" :readonly="readonly"></el-input>
                            </el-col> -->
                        </el-row>
                        <el-row class="myPaddingBottom_10px">
                            <el-col :span="3" class="myLeftMsg">
                                处理人 :
                            </el-col>
                            <el-col :span="6">
                                <el-input placeholder="处理人"  v-model="datas.dealer_name" :readonly="readonly"></el-input>
                            </el-col>
                            <!-- <el-col :span="3" class="myLeftMsg">
                              联系电话 :
                            </el-col>
                            <el-col :span="6">
                              <el-input placeholder="联系电话" v-model="datas.dealer_phone" :readonly="readonly"></el-input>
                            </el-col> -->
                        </el-row>
                        <el-row class="myPaddingBottom_10px">
                            <el-col :span="3" class="myLeftMsg">
                                监察人 :
                            </el-col>
                            <el-col :span="6">
                                <el-input placeholder="监察人"  v-model="datas.supervisor_name" :readonly="readonly"></el-input>
                            </el-col>
                        </el-row>
                        <el-row class="myPaddingBottom_10px">
                            <el-col :span="3" class="myLeftMsg">
                                生成时间 :
                            </el-col>
                            <el-col :span="6">
                                <el-input placeholder="生成时间" v-model="datas.gen_time" :readonly="readonly"></el-input>
                            </el-col>
                        </el-row>
                        <el-row class="myPaddingBottom_10px">
                            <el-col :span="3" class="myLeftMsg">
                                截止时间 :
                            </el-col>
                            <el-col :span="6">
                                <el-input placeholder="截止时间" v-model="datas.end_time" :readonly="readonly"></el-input>
                            </el-col>
                        </el-row>
                        <!-- <el-row class="myPaddingBottom_10px">
                          <el-col :span="3" class="myLeftMsg">
                            提交时间 :
                          </el-col>
                          <el-col :span="6">
                            <el-input placeholder="提交时间" v-model="datas.commit_time" :readonly="readonly"></el-input>
                          </el-col>
                        </el-row> -->
                        <el-row class="myPaddingBottom_10px">
                            <el-col :span="6" :offset="3">
                                <el-button @click="onBack">关 闭</el-button>
                            </el-col>
                        </el-row>
                    </el-tab-pane>
                    <el-tab-pane label="考核标准" name="second">
                        <el-row :gutter="10">
                            <el-col :span="4">
                                <template>
                                    <el-select v-model="standardSelected"
                                               clearable
                                               placeholder="全部执行状态">
                                        <el-option
                                            v-for="item in standard"
                                            :key="item.label"
                                            :label="item.label"
                                            :value="item.value">
                                        </el-option>
                                    </el-select>
                                </template>
                            </el-col>
                            <el-col :span="4">
                                <template>
                                    <el-select v-model="resultSelected"
                                               clearable
                                               placeholder="全部考核结果">
                                        <el-option
                                            v-for="item in result"
                                            :key="item.label"
                                            :label="item.label"
                                            :value="item.value">
                                        </el-option>
                                    </el-select>
                                </template>
                            </el-col>
                            <el-col :span="4">
                                <el-input placeholder="请输入关键词" v-model="kw"></el-input>
                            </el-col>
                            <el-col :span="4">
                                <el-button type="primary" @click="search">查询</el-button>
                            </el-col>
                        </el-row>
                        <el-row class="myPaddingTop_10px">
                            <el-col :span="24">
                                <template>
                                    <el-table
                                        border
                                        :data="list"
                                        :stripe = true
                                        v-loading="loading"
                                        style="width: 100%">
                                        <el-table-column type="expand">
                                            <template slot-scope="props">
                                                <el-table
                                                    border
                                                    stripe
                                                    :data="props.row.detail_list"
                                                    style="width: 100%">
                                                    <el-table-column
                                                        type="index"
                                                        label="序号"
                                                        width="55">
                                                    </el-table-column>
                                                    <el-table-column
                                                        label="考核地址"
                                                        prop="detail_address" >
                                                    </el-table-column>
                                                    <el-table-column
                                                        label="考核结论"
                                                        prop="detail_result" >
                                                        <template scope="scope">
                                                            <span v-if="scope.row.detail_result==0">合格</span>
                                                            <span v-if="scope.row.detail_result==1">不合格</span>
                                                        </template>
                                                    </el-table-column>
                                                    <el-table-column
                                                        label="加/扣分项"
                                                        prop="score" >
                                                    </el-table-column>
                                                    <el-table-column
                                                        label="处理人"
                                                        prop="dealer_name" >
                                                    </el-table-column>
                                                    <el-table-column
                                                        label="处理时间"
                                                        prop="commit_time" >
                                                    </el-table-column>
                                                    <el-table-column
                                                        label="功能操作"
                                                        width="100">
                                                        <template scope="scope">
                                                            <el-button class="look" type="text" size="small" @click="detailinfo(scope.row.detail_id,props.row.detail_result)">详情</el-button>
                                                        </template>
                                                    </el-table-column>
                                                </el-table>
                                            </template>
                                        </el-table-column>
                                        <el-table-column
                                            label="序号"
                                            type="index"
                                            width="55">
                                        </el-table-column>
                                        <el-table-column
                                            label="考核标准代码"
                                            prop="st_no">
                                        </el-table-column>
                                        <el-table-column
                                            label="考核项目"
                                            prop="subtype_name">
                                        </el-table-column>
                                        <el-table-column
                                            label="考核内容"
                                            prop="st_content">
                                        </el-table-column>
                                        <el-table-column
                                            label="考核标准"
                                            prop="st_info">
                                        </el-table-column>
                                        <!-- <el-table-column
                                          label="重点考核"
                                          prop="detail_focus">
                                        </el-table-column> -->
                                        <el-table-column
                                            label="必检"
                                            prop="is_necessary"
                                            width="100">
                                            <template scope="scope">
                                                <span v-if="scope.row.is_necessary==1">是</span>
                                                <span v-else>否</span>
                                            </template>
                                        </el-table-column>
                                        <el-table-column
                                            label="执行状态"
                                            prop="status"
                                            width="120">
                                            <template scope="scope">
                                                <span v-if="scope.row.status==1">已执行</span>
                                                <span v-else>未执行</span>
                                            </template>
                                        </el-table-column>
                                        <el-table-column
                                            label="考核结论"
                                            prop="detail_result"
                                            width="120">
                                            <template scope="scope">
                                                <span v-if="scope.row.detail_result==1&&scope.row.status==1">不合格</span>
                                                <span v-else-if="scope.row.detail_result==0&&scope.row.status==1">合格</span>
                                                <span v-else>-</span>
                                            </template>
                                        </el-table-column>
                                        <el-table-column
                                            label="分值合计"
                                            prop="total_score">
                                        </el-table-column>
                                        <!-- <el-table-column
                                          label="功能操作"
                                          width="120">
                                          <template scope="scope">
                                            <el-button class="look" type="text" size="small" @click="toDetailed(scope.row.detail_id)">详情</el-button> |
                                            <el-button class="look" type="text" size="small" @click="openDetailed(scope.row.detail_id)">整改任务</el-button>
                                          </template>
                                        </el-table-column> -->
                                    </el-table>
                                </template>
                            </el-col>
                        </el-row>
                        <!-- <div class="block">
                          <el-pagination
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                            :current-page="page_num"
                            :page-sizes="[10, 15]"
                            :page-size="page_size"
                            layout="total, sizes, prev, pager, next, jumper"
                            :total="total">
                          </el-pagination>
                        </div> -->
                        <el-row class="myPaddingTop_10px">
                            <el-col :span="6">
                                <el-button @click="onBack">关 闭</el-button>
                            </el-col>
                        </el-row>
                    </el-tab-pane>
                </el-tabs>
            </el-col>
        </el-row>

        <!-- 整改任务列表 start -->
        <el-dialog title="整改任务" :visible.sync="taskDig">
            <el-row>
                <template>
                    <el-table
                        border
                        :data="rectifylist"
                        :stripe = true
                        v-loading="loading"
                        style="width: 100%">
                        <el-table-column
                            label="任务单号"
                            prop="rectify_no">
                        </el-table-column>
                        <el-table-column
                            label="生成时间"
                            prop="gen_time">
                        </el-table-column>
                        <el-table-column
                            label="当前状态"
                            prop="cate_name">
                            <template scope="scope">
                                {{scope.row.status | status}}
                            </template>
                        </el-table-column>
                        <el-table-column
                            label="是否逾期"
                            prop="is_overdue">
                            <template scope="scope">
                                <span v-if="scope.row.is_overdue==1">未逾期</span>
                                <span v-else>逾期</span>
                            </template>
                        </el-table-column>
                        <el-table-column
                            label="处理人"
                            prop="dealer_name">
                        </el-table-column>
                        <el-table-column
                            label="提交时间"
                            prop="commit_time">
                        </el-table-column>
                        <el-table-column
                            label="截止时间"
                            prop="end_time">
                        </el-table-column>
                        <el-table-column
                            label="功能操作">
                            <template scope="scope">
                                <el-button class="look" type="text" size="small" @click="toReDetailed(scope.row.rectify_id,'info')">详情</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </template>
            </el-row>
            <div slot="footer" class="dialog-footer">
                <el-button @click="taskDig = false">关 闭</el-button>
            </div>
        </el-dialog>
        <!-- 整改任务列表 end -->

        <el-dialog title="详情" width='60%' :visible.sync="typeDialog">
            <el-row>
                <el-col :span="6" class="myLeftMsg">
                    考核结论:
                </el-col>
                <el-col :span="18">
                    <!--<el-input placeholder="考核结论" v-model="detail.detail_result" :disabled="true"></el-input>-->
                    <el-input placeholder="合格" v-if="detail.detail_result==0" :disabled="true">
                    </el-input>
                    <el-input placeholder="不合格" v-else :disabled="true">
                    </el-input>
                </el-col>
            </el-row>
            <el-row class="myPaddingTop_10px">
                <el-col :span="6" class="myLeftMsg">
                    扣分值:
                </el-col>
                <el-col :span="18">
                    <template>
                        <el-select v-model="detail.score"
                                   clearable
                                   :disabled="readonly"
                                   placeholder="扣分值">
                            <el-option :key="0" :label="0" :value="0"></el-option>
                            <el-option
                                v-for="i in 20"
                                :key="i/2"
                                :label="i/2"
                                :value="i/2">
                            </el-option>
                        </el-select>
                    </template>
                </el-col>
            </el-row>
            <el-row class="myPaddingTop_10px" v-if="itemresult==0">
                <el-col :span="6" class="myLeftMsg">
                    整改天数:
                </el-col>
                <el-col :span="18">
                    <el-input placeholder="整改天数" v-model="detail.rectify_days" :readonly="readonly"></el-input>
                </el-col>
            </el-row>
            <el-row class="myPaddingTop_10px" v-if="itemresult==0">
                <el-col :span="6" class="myLeftMsg">
                    不合格标签:
                </el-col>
                <el-col :span="18" style="line-height: 40px">
                    <!--<el-checkbox-group v-model="st_tag" size="mini" :disabled="readonly">-->
                    <!--<el-checkbox-button v-for="label in labelOption" :label="label" :key="label">{{label}}</el-checkbox-button>-->
                    <!--</el-checkbox-group>-->
                    <!--<el-tag v-for="i in detail.st_tag.split(',')">{{i}}</el-tag>-->
                    <el-tag v-for = "tag in st_tag" v-if="tag.length >0 "
                            :key="tag"
                            :type="danger">{{tag}}</el-tag>
                </el-col>
            </el-row>
            <el-row class="myPaddingTop_10px">
                <el-col :span="6" class="myLeftMsg">
                    现场图片:
                </el-col>
                <el-col :span="18">
                    <el-upload
                        :action="uploadUrl"
                        list-type="picture-card"
                        :on-preview="handlePictureCardPreview"
                        :before-upload="beforeAvatarUpload"
                        :on-exceed="handleExceed"
                        :data="postData"
                        :limit="3"
                        :file-list="fileList"
                        :disabled="readonly"
                        :on-success="handleAvatarSuccess"
                        :on-remove="handleRemove">
                        <i class="el-icon-plus"></i>
                    </el-upload>
                    <el-dialog :visible.sync="dialogVisible">
                        <img width="100%" :src="dialogImageUrl" alt="">
                    </el-dialog>
                    <!-- <img :src="i" alt="" v-for="i in detail.detail_img.split(',')" width="50"/> -->
                </el-col>
            </el-row>
            <el-row class="myPaddingTop_10px">
                <el-col :span="6" class="myLeftMsg">
                    文字说明:
                </el-col>
                <el-col :span="18">
                    <el-input placeholder="考核结论" type="textarea" v-model="detail.detail_info" :readonly="readonly"></el-input>
                </el-col>
            </el-row>
            <el-row class="myPaddingTop_10px">
                <el-col :span="6" class="myLeftMsg">
                    考核地址:
                </el-col>
                <el-col :span="18">
                    <el-input placeholder="考核地址" type="textarea" v-model="detail.detail_address" :readonly="readonly"></el-input>
                </el-col>
            </el-row>
            <div slot="footer" class="dialog-footer">
                <el-button @click="typeDialog = false">取 消</el-button>
            </div>
        </el-dialog>

    </div>
</template>

<style scoped>
    .myContainer{
        background: #fff;
        padding: 10px;
    }
    .myLeftMsg{
        line-height: 40px;
        text-align: right;
        padding-right: 10px;
    }
    .myPaddingBottom_10px{
        padding-bottom: 10px;
    }
    .myVA_M{
        vertical-align: middle;
    }
    .myBgGreen{
        background: #00c2a9;
        border-color: #00c2a9;
        color: #fff;
        margin-top: 2px;
    }
    .myBgGreen:hover{
        background: #33ceba;
    }
    .myLineHeight_45px{
        line-height: 45px;
    }
    .mymarginTop_10px{
        margin-top: 10px;
    }
    .myDialogSearchText{
        width: 360px;
    }
    .myPaddingTop_10px{
        padding-top: 10px;
    }
    .myLeftMsg{
        line-height: 40px;
        text-align: right;
        padding-right: 10px;
    }
</style>

<script>
    import { infoMainTask , getDetailTaskListV2 , getRectifyDetailTaskList , infoDetailMainTask} from '@/api/quality';
    import { getQNToken } from '@/api/contentMGT';
    import { QINIU_API , QINIU_UP_API } from '@/config/baseUrl';
    export default {
        data(){
            return{
                title:"任务详细",
                tableData:[],
                list:[],
                page_num:1,
                page_size:10,
                total:null,
                loading:false,
                readonly:true,
                standardSelected:"",
                standard:[
                    {label:"已执行",value:"1"},
                    {label:"未执行",value:"0"}
                ],
                resultSelected:"",
                result:[
                    {label:"合格",value:"0"},
                    {label:"不合格",value:"1"}
                ],
                kw:"",
                id:"",
                type:"",
                flag:"",
                activeName:"first",
                taskDig:false,
                datas:{},
                mainstatus:"",
                rectifylist:[],
                typeDialog:false,
                detail_id:'',
                detail:[],
                uploadUrl:QINIU_UP_API,
                QINIU_API:QINIU_API,
                thumbnailUrl:[],
                fileList:[],
                labelOption:['管理工具运用','制度严格执行','流程标准规范','工作效率','培训反馈'],
                st_tag:[],
                dialogImageUrl: '',
                dialogVisible: false,
                postData:{
                    token:""
                },
                itemresult:''
            }
        },
        components: {

        },
        filters:{
            status(val){
                let type={
                    "1":"待整改",
                    "2":"待审核",
                    "3":"已完成",
                }
                return type[val];
            }
        },
        created(){
            this.id = this.$route.query.id;
            this.type=this.$route.query.type;
            this.flag=this.$route.query.flag;
            this.activeName=this.flag || "first";
            if(this.activeName=="second"){
                this.ongetDetailTaskList();
            }
            if(this.type=="info"){
                this.oninfoMainTask();
            }

            this.onGetToken();
        },
        mounted(){
            document.title = this.title;
        },
        methods:{
            handleSizeChange(val) {//每页条数控制
                this.page_size = val;
                this.ongetDetailTaskList();
            },
            handleCurrentChange(val) {//每页
                this.page_num = val;
                this.ongetDetailTaskList();
            },
            search(){
                this.ongetDetailTaskList();
            },
            onBack(){
                this.$router.go(-1);
            },
            toDetailed(id){
                this.$router.push({
                    path:"supervisoryTaskDtailed",
                    query:{
                        type:"info",
                        taskid:this.id,
                        id:id
                    }
                })
            },
            openDetailed(id){
                let vm=this;
                vm.ongetRectifyDetailTaskList(id);
            },
            toReDetailed(id){
                this.$router.push({
                    path:"supervisorySubtaskComonents",
                    query:{
                        flag:"back",
                        id:id,
                        taskid:this.id,
                        type:"info"
                    }
                })
            },
            oninfoMainTask(){
                let vm=this;
                infoMainTask(vm.id).then(response => {
                    let res=response.data;
                    vm.datas=res;
                    vm.mainstatus=vm.mainTask(res.status);
                }).catch(error => {
                    vm.$message.error("执行失败！"+error.response.data.error_msg);
                })
            },
            mainTask(val){
                let type={
                    "1":"待处理",
                    "2":"处理中",
                    "3":"整改中",
                    "4":"已完成",
                    "5":"逾期",
                }
                return type[val];
            },
            ongetDetailTaskList(){
                let vm=this;
                let params={
                    // type_id:vm.majorSelected,
                    status:vm.standardSelected,
                    keyword:vm.kw,
                    result:vm.resultSelected,
                    // page_num:vm.page_num,
                    // page_size:vm.page_size
                }
                vm.loading=true;
                getDetailTaskListV2(params,vm.id).then(response => {
                    let res=response.data;
                    vm.list=res;
                    // vm.page_size=res.page_size;
                    // vm.page_num=res.page_num;
                    // vm.total=res.total;
                    vm.loading=false;
                }).catch(error => {
                    vm.loading=false;
                    vm.$message.error("执行失败！"+error.response.data.error_msg);
                })
            },
            handleClick(tab, event) {
                let vm=this;
                if(tab.name=="second"){
                    vm.ongetDetailTaskList();
                }
            },
            ongetRectifyDetailTaskList(id){
                let vm=this;
                getRectifyDetailTaskList(id).then(response => {
                    let res=response.data;
                    vm.rectifylist=res;
                    vm.taskDig=true;
                }).catch(error => {
                    vm.$message.error("执行失败！"+error.response.data.error_msg);
                })
            },
            detailinfo(id,itemresult){
                this.detail_id=id;
                this.itemresult=itemresult;
                //type=='update'?this.readonly=false:this.readonly=true;
                this.oninfoDetailMainTask(id);
            },
            oninfoDetailMainTask(id){
                let vm=this;
                infoDetailMainTask(id).then(response =>{
                    let res=response.data;
                    vm.detail=res;
                    if(res.st_tag){
                        vm.st_tag=res.st_tag.split(',');
                    }else{
                        vm.st_tag=[];
                    }
                    vm.fileList=[];
                    vm.thumbnailUrl=[];
                    if(res.detail_img){
                        let imgs=res.detail_img.split(',');
                        for(let i=0; i<imgs.length; i++){
                            vm.fileList.push({
                                url:QINIU_API+imgs[i]
                            })
                            vm.thumbnailUrl.push(imgs[i])
                        }
                    }
                    vm.typeDialog=true;
                }).catch(error =>{
                })
            },
            handlePictureCardPreview(file) {
                this.dialogImageUrl = file.url;
                this.dialogVisible = true;
            },
            beforeAvatarUpload(file) {
                const isJPG = file.type === 'image/jpeg';
                const isPNG = file.type === 'image/png';
                const isLt2M = file.size / 1024 / 1024 < 2;
                if (!isJPG && !isPNG) {
                    this.$message.error('上传图片只能是 JPG/PNG 格式!');
                }
                if (!isLt2M) {
                    this.$message.error('上传图片大小不能超过 2MB!');
                }
                return (isJPG || isPNG) && isLt2M;
            },
            onGetToken(){//拉取七牛token
                let vm=this;
                getQNToken().then(response => {
                    let res=response.data.up_token;
                    vm.postData.token=res;
                }).catch(error => {
                })
            },
            handleExceed(file, fileList){
                this.$message.info("最多3张!");
            },
            handleAvatarSuccess(res, file, filelist) {
                this.thumbnailUrl=[];
                // filelist.length>3?this.isdisplay=true:this.isdisplay=false;
                for(let i=0; i<filelist.length; i++){
                    if(filelist[i].response){
                        this.thumbnailUrl.push(filelist[i].response.key)
                    }else{
                        this.thumbnailUrl.push(filelist[i].url)
                    }
                }
            },
            handleRemove(file, filelist) {
                this.thumbnailUrl=[];
                for(let i=0; i<filelist.length; i++){
                    if(filelist[i].response){
                        this.thumbnailUrl.push(filelist[i].response.key)
                    }else{
                        this.thumbnailUrl.push(filelist[i].url)
                    }
                }
            },

        }

    }


</script>



